Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

176
Visualizações
¿Por qué mi evento de "cambio" no ha funcionado según lo previsto?

Bien, estoy practicando mi JS y HTML, mi código actual se ve así:

 document.querySelector('input[name="answer"]:checked').checked = false; let Select = document.querySelector('input[name="answer"]'); Select.addEventListener('change', function(event) { alert(event.target.value) })
 <div> <label><input type="radio" name="answer" value="1" checked="checked">1</label> <label><input type="radio" name="answer" value="2">2</label> </div>

Mi objetivo es cancelar el "marcado" de la primera radio, luego agregar un evento que mostrará el valor de cada radio cada vez que lo elija/"marque", pero como puede notar, hasta ahora la alerta solo aparecerá si elijo el primero radio. Entonces, si puedo preguntar, ¿dónde hice mal y cómo puedo solucionarlo?

pd Por el bien de la práctica, el HTML tiene que permanecer igual. Sin agregar Id u otro selector.

about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

  1. Solo obtienes el primero con querySelector
  2. El querySelector(...:checked) funcionará porque solo puede tener una radio marcada
  3. Me gusta mucho delegar - es recomendable y tiene mucho sentido

 document.querySelector('input[name="answer"]:checked').checked = false; let radDiv = document.getElementById('radioDiv'); radDiv.addEventListener('change', function(event) { const tgt = event.target; if (tgt.matches("[type=radio][name=answer]")) { // check we have the right elements alert(tgt.value) } })
 <div id="radioDiv"> <label><input type="radio" name="answer" value="1" checked="checked">1</label> <label><input type="radio" name="answer" value="2">2</label> </div>

about 4 years ago · Juan Pablo Isaza Relatório

0

 document.querySelector('input[name="answer"]:checked').checked = false; let Select = document.querySelectorAll('input[name="answer"]'); Select.forEach(el => el.addEventListener('change',function (event) { Select.forEach(e => alert(e.value)); }))
 <div> <label><input type="radio" name="answer" value="1" checked="checked">1</label> <label><input type="radio" name="answer" value="2">2</label> </div>

about 4 years ago · Juan Pablo Isaza Relatório

0

let Select = document.querySelectorAll('input[name="answer"]'); Select.forEach(function(elem) { elem.addEventListener("change", function(event) { alert(event.target.value) }); });

Use arriba para el selector de elementos en lugar de querySelector que devuelve un solo objeto (primera coincidencia) querySelectorAll devuelve una matriz de elementos.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda